<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <!-- 商品组 列表 -->
    <div class="u_goodslist" v-if="datas.list">

      <div class="nav nav-bgimage" v-if="datas.list.length > 0">
        <div class="nav-li" :class="[index == 0 ?'nav-selected':'']"
             v-for="(item, index) in datas.list" :key="index">
          <div class="nav-lis">
            {{item.text}}
          </div>
        </div>
      </div>

      <div class="u_goodslist_one">
        <div v-if="datas.list.length <= 0 && datas.goods_type === 'rush'" style="width: 100%;height: 150px;line-height: 50px;text-align: center;font-size: 18px"> <a-empty /> </div>
        <div class="cpslist" v-for="item in 3">
          <div class="left">
            <img :src="emptyImage" alt="" />
          </div>
          <div class="right">
            <div class="top_rol">
              <div class="top_rol_name">xxx店名</div>
              <div class="top_rol_sale">月销 888</div>
            </div>
            <div class="top_rol_title">
              <div class="top_rol_platform">拼多多</div>
              <span>商品标题商品标题</span>
            </div>
            <div class="top_rol_price">
              <div class="currentPrice">
                <span class="sym">￥</span><span>88</span>
                <span class="originalPrice">原价￥888.8</span>
              </div>
            </div>
            <div class="discounts">
              <div class="couponBox">
                <img src="https://www.yunzmall.com/min_img/cps/5y.png" alt="" />
                8元券
              </div>
              <div class="earnings">预估8.88元收益</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
	import emptyImage from "@/resource/images/image.png";
	// 自定义样式
	const css = function () {
		if(this.datas.list) {
			const {
				preview_color,
				padding_top,
				padding_bottom,
				padding_left,
				padding_right,
				tab_bg_color,
				tab_color,
				tab_active_color
			} = this.datas;

			return `
        .component-${this.id} .u_goodslist{
            background-color: ${preview_color};
            padding-top: ${padding_top}px;
            padding-bottom: ${padding_bottom}px;
            padding-left: ${padding_left}px;
            padding-right: ${padding_right}px;
        }

        .component-${this.id} .time-box div{
            color: ${'#ff2c29'};
        }

        .component-${this.id}  .nav-bgimage{
            background-color: ${tab_bg_color};
            color: ${tab_color};
        }

        .component-${this.id}  .nav-bgimage .nav-selected{
            color: ${tab_active_color};
            border-bottom: 2px solid ${tab_active_color};
        }
    `;
		}
	};

	export default {
		data() {
			return {
				emptyImage
			};
		},
		props: ['id', 'datas', 'styles', 'languages'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
			env() {
				return this.$store.state.page.env;
			},
		},

		methods: {},

		mounted() {
			this.$emit('loaded');
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    display: flex;
    justify-content: center;
    width: 375px;

    ul {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      margin: 12/37.5rem 12/37.5rem 3/37.5rem;
      padding: 0;
      width: 100%;

    }
  }

  .nav {
    display: flex;
    align-items: center;
    height: 40px;
    white-space: nowrap;
    flex-wrap: nowrap;
    box-sizing: content-box;
    .nav-li {
      flex: 1;
      min-width: 20%;
      text-align: center;
      .nav-lis {
        display: inline-block;
        line-height: 40px;
      }
    }
  }

  .cpslist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 375px;
    padding: 5px;
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .discounts div:nth-child(n + 1) {
        margin-right: 5px;
      }
      .discounts {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 5px;
        .earnings {
          display: flex;
          font-size: 10px;
          color: #39342e;
          align-items: center;
          padding: 5px;
          background-color: #fee3b7;
          border-radius: 10px;
        }
        .couponBox {
          display: flex;
          align-items: center;
          padding: 3px 5px;
          background: #e64a40;
          border-radius: 10px;
          font-size: 10px;
          color: #fff5dc;
          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }
      .top_rol_price {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .originalPrice {
          font-size: 10px;
          color: #777777;
          margin-left: 8px;
        }
        .currentPrice {
          color: #e64a40;
          font-size: 24px;
          .sym {
            font-size: 10px;
            color: #e64a40;
          }
        }
      }
      .top_rol_title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        .top_rol_platform {
          margin-right: 2px;
          background: #bb3e26;
          width: 38px;
          height: 19px;
          color: #fff;
          text-align: center;
          line-height: 19px;
          border-radius: 5px;
          font-size: 12px;
          display: inline-grid;
        }
      }
      .top_rol {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        margin-bottom: 5px;
        .top_rol_name {
          width: 60%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 10px;
          color: #777777;
        }
        .top_rol_sale {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 10px;
          color: #777777;
          text-align: right;
          margin-right: 2px;
        }
        span {
          white-space: nowrap;
        }
      }
    }
    .left {
      flex: 0 0 130px;
      width: 130px;
      height: 130px;
      margin-right: 5px;
      img {
        width: 130px;
        height: 130px;
        border-radius: 5px;
      }
    }
  }
</style>
